<template>
    <div class="aheader">
        <div class="l-content">
            <el-button icon="el-icon-menu" size="medium" style="margin-left:20px" @click="handleMenu"></el-button>
            <span class="firstPage">首页</span>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="imgg" :src="require(`@/assets/shenying.jpg`)" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="showinfo('/info')">个人信息</el-dropdown-item>
                    <el-dropdown-item @click.native="close('/login')">退出</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'aheader',
    data() {
        return {
            userinfo: {
                id: null,
                level: null,
                name: null,
                img: null,
                gender: ''
            }
        }
    },
    methods: {
        close(item){
            localStorage.removeItem('jwtToken')
            localStorage.removeItem('user_id');
            localStorage.removeItem('level')
            this.$router.push(item);
        },
        showinfo(item) {
            //console.log('111')
            if (item != this.$route.path) {
                this.$router.push(item);
            }
        },
        handleMenu() {
            this.$store.commit('collapseChange')
        },
        fetchData() {
            // 在这里进行一些操作，例如通过 axios 获取数据
            const user_id = localStorage.getItem('user_id');
            console.log(user_id)
            axios.post('/api/user/getinfo', user_id, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    // 处理响应数据

                    // 将获取的数据保存到组件的 data 中
                    this.userinfo = response.data.data
                    localStorage.setItem('level',this.userinfo.level)
                    //console.log(this.userinfo)
                })
                .catch(error => {
                    console.error('Error fetching data:', error)
                })
        }
    }, beforeMount() {
        // 在组件渲染之前触发的方法
        this.fetchData()
    }
}

</script>
<style>
.aheader {
    height: 70px;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.l-content {
    padding-bottom: 10px;
}

.firstPage {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
}

.imgg {
    width: 40px;
    height: 40px;
    padding-top: 10px;
    padding-right: 20px;
}
</style>